import React, { PureComponent } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入柱饼图
import  'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';
//引入四张表格组件
import Bar from './Bar' ;
import Pie from './Pie' ;
import Scatter from './Scatter' ;
import Scatteryear from './Scatteryear' ;

import { Card, Tabs, Collapse, Table, Icon,Drawer,Button} from 'antd';
import { connect } from 'dva';
import styles from './Data.less';
const TabPane = Tabs.TabPane;
@connect(({ data, loading }) => ({
  jigou: data.currentJigou,
  zuser:data.currentZuser,
  cuser:data.currentCuser,
  tableuser:data.currentTableuser,
}))
export default class Data extends PureComponent {
  state = { visible: false };
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  componentDidMount() {
    //查数字列表
    const { dispatch } = this.props;
    dispatch({
      type: 'data/getJigou',
    });
    dispatch({
      type: 'data/getZuser',
    });
    dispatch({
      type: 'data/getCuser',
    });
    dispatch({
      type: 'data/getTableuser',
    });
  }
  render() {
        const jigou =this.props.jigou;//获取数据机构
        const zuser =this.props.zuser;//获取总用户人数
        const cuser =this.props.cuser;//获取注册用户人数
        const tableuser =this.props.tableuser;//获取表格里面的数据
        const piedata =[{value:220, name:'强'},{value:300, name:'中'},{value:100, name:'弱'},]//声明饼状图数据
        /* console.log(jigou,zuser,cuser); */
        const columns = [{
          title: '机构',
          dataIndex: 'name',
        }, {
          title: '馆长办公室',
          dataIndex: 'aobj',
        }, {
          title: '党委办公室',
          dataIndex: 'bobj',
        },{
          title: '采编部',
          dataIndex: 'cobj',
        },{
          title: '图书借阅部',
          dataIndex: 'dobj',
        },{
          title: '报刊部',
          dataIndex: 'eobj',
        },{
          title: '信息咨询部',
          dataIndex: 'fobj',
        },{
          title: '特藏与地方文献部',
          dataIndex: 'gobj',
        },{
          title: '网络与数字资源部',
          dataIndex: 'hobj',
        },{
          title: '辅导部',
          dataIndex: 'iobj',
        },{
          title: '理论研究部',
          dataIndex: 'jobj',
        },{
          title: '少儿书刊部',
          dataIndex: 'kobj',
        },{
          title: '读者活动部',
          dataIndex: 'lobj',
        },{
          title: '宣传策划部',
          dataIndex: 'mobj',
        },{
          title: '教育培训部',
          dataIndex: 'nobj',
        },{
          title: '财务部',
          dataIndex: 'oobj',
        },{
          title: '离退休干部工作部',
          dataIndex: 'pobj',
        },{
          title: '物业管理部',
          dataIndex: 'qobj',
        },{
          title: '保卫部',
          dataIndex: 'robj',
        },{
          title: '业务拓展部',
          dataIndex: 'sobj',
        },{
          title: '基建部',
          dataIndex: 'tobj',
        }];
    return (
      <div className="card-container">
          <Tabs type="card">
            <TabPane tab="平台用户分布" key="1">
                  <Button type="primary" onClick={this.showDrawer} >
                    具体数据展示
                  </Button>
                  <Drawer
                    title="用户平台数据具体分布"
                    placement="bottom"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                  >
                  <Table bordered={true} pagination={false} key='id' columns={columns} dataSource={tableuser} size="small" />
                  </Drawer>
                 <Bar yname={jigou} zuser={zuser} cuser={cuser}/>
            </TabPane>
            <TabPane tab="用户密码强度分析" key="2">
                 <Pie piedata={piedata}/>
            </TabPane>
            <TabPane tab="读者用户注册统计（月）" key="3">
                 <Scatter/>
            </TabPane>
            <TabPane tab="读者用户注册统计（年）" key="4">
                <Scatteryear/>
            </TabPane>
          </Tabs>
    </div>
    );
  }
}
